<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Chreemi - Chrome for Meemi, Option Page</title>
		
		<style>
			body {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				background-color: #BFDAF7;
				font-size: 13px;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				color: #433C2A; }

			.section-title {
				font-weight: bold;
				font-size: 20px; }
			.tips {
				font-style: italic;
				font-size: 11px;
				margin-left: 10px; }
			.option {
				margin-bottom: 15px; }
			.txt {
				font: Normal 12px Verdana, Helvetica, sans-serif;
				border: solid 1px #cccccc;
				background-color: #f4f4f4; }
				
			#about-section {
				background-color: #FFF;
				-webkit-border-radius: 5px;
				padding: 10px;
				margin: 15px 10px 0 20px; }
		</style>
		
		<script src="jquery.js" type="text/javascript"></script> 
		<script src="jquery.sha256.min.js" type="text/javascript"></script> 

		<script>
			var defaultDelay = 1000 * 90;
			var minimumDelay = 1000 * 30;
		
			var usernameTextBox;
			var passwordTextBox;
			var passwordChanged = false;
			var saveButton;
			var radioShow;
			var radioHide;
			var showRandomMeme;

			var whereToReadMeme = localStorage.whereToReadMeme || 'meemi';
			var notification;
			if(localStorage.notification==undefined
			   || (notification=JSON.parse(localStorage.notification)).toString() !="[object Object]"){
				notification = {"memes":false,"replies":false,"memes_priv":false,"replies_priv":false,"mentions":false,"new_followers":false};
			}
			
			//quando ci sarà la localizzazione questo array non sarà più necessario
			var notificationLabels = {
				"memes":"Memi",
				"replies":"Risposte",
				"memes_priv":"Memi Privati",
				"replies_priv":"Risposte Private",
				"mentions":"Citazioni",
				"new_followers":"Followers"
			};
			
			function init() {
				var popupBehaviour = "show";
			
				usernameTextBox = document.getElementById( "username" );
				passwordTextBox = document.getElementById( "password" );
				delayTextBox = document.getElementById( "delay-time" );
				saveButton = document.getElementById( "save-button" );
				radioShow = document.getElementById( "button-behaviour-show" );
				radioHide = document.getElementById( "button-behaviour-hide" );

				usernameTextBox.value = localStorage.username || "";
				passwordTextBox.value = localStorage.password || "";
				delayTextBox.value = localStorage.requestDelay / 1000 || defaultDelay / 1000;
				showRandomMeme = localStorage.showRandomMeme || "show";
				
				if( localStorage.showPopup == 0 )
					popupBehaviour = "hide";
				$('input[name=button-readmeme][value=' + whereToReadMeme + ']').click();
				$('input[name=button-popup-behaviour][value=' + popupBehaviour + ']').click();
				
				if( showRandomMeme == "show" )
					document.getElementById( "button-random-behaviour" ).checked = true;
				markClean();
			}
			
			function save() {
				localStorage.username = usernameTextBox.value;
				if(passwordChanged) { localStorage.password = $.sha256(passwordTextBox.value); }
				localStorage.notification = JSON.stringify(notification);
				localStorage.whereToReadMeme = whereToReadMeme;
				localStorage.showRandomMeme = showRandomMeme;
				
				var intDelay = parseInt( delayTextBox.value ) * 1000;
				if( isNaN( intDelay ) || intDelay < 1000 * 30 ) 
					localStorage.requestDelay = defaultDelay;
				else
					localStorage.requestDelay = intDelay;

				markClean();
				chrome.extension.getBackgroundPage().init();
			}
						
			function setRandomMemeBehaviour() {
				if( document.getElementById( "button-random-behaviour" ).checked )
					showRandomMeme = "show";
				else
					showRandomMeme = "hide";
				markDirty();
			}

			function markDirty(sourceObject) { 
				saveButton.disabled = false; 
				if(sourceObject && sourceObject.id=="password"){
					passwordChanged = true;
				}
			}
			function markClean() { saveButton.disabled = true; }
			
			function setPopup() {
				radioShow.checked = 1;
				radioHide.checked = 0;
				chrome.browserAction.setPopup({ popup: "popup.html" });
				chrome.browserAction.setTitle({ title: "Condividi su Meemi." })
				localStorage.showPopup = 1;
				markDirty();
			}
			function removePopup() {
				radioHide.checked = 1;
				radioShow.checked = 0;
				chrome.browserAction.setPopup({ popup: "" });
				chrome.browserAction.setTitle({ title: "Go to Meemi Home Page." });
				localStorage.showPopup = 0;
				markDirty();
			}
			
			function setPopupBehaviour() {
				var radioValue = $('input[name=button-popup-behaviour]:checked').val();
				if( radioValue == "show" ) {
					chrome.browserAction.setPopup({ popup: "popup.html" });
					chrome.browserAction.setTitle({ title: "Condividi su Meemi." })
					localStorage.showPopup = 1; }
				else {
					chrome.browserAction.setPopup({ popup: "" });
					chrome.browserAction.setTitle({ title: "Go to Meemi Home Page." });
					localStorage.showPopup = 0; }
				markDirty();
			}
			
			function setMemeReader() {
				whereToReadMeme = $('input[name=button-readmeme]:checked').val();
				markDirty();
			}
			
			function drawCheckboxes() {
				var position = document.getElementById( "checkboxes" );
				$.each(notification,function(key,val) {
					checkbox = document.createElement( "input" );
					checkbox.setAttribute( "id", "checkbox_" + key);
					checkbox.setAttribute( "type", "checkbox" );
					checkbox.setAttribute( "name", "show-options[]" );
					checkbox.setAttribute( "onClick", "notification."+key+"=$('input[id=checkbox_" + key + "]').attr('checked');markDirty();" );
					
					checkbox.checked = val;
					
					checkLabel = document.createElement( "label" );
					checkLabel.setAttribute( "for", "checkbox_" + key );
					checkLabel.innerHTML = notificationLabels[key];

					position.appendChild( checkbox );
					position.appendChild( checkLabel );
					position.appendChild( document.createElement( "br" ) );
				});

			}
			/*
			*/
		</script>
		
	</head>
	<body onload="init()">
		<div id="header">
			<h1>Chreemi</h1>
		</div>
		<div class="option">
			Il tuo Meemi Username: <input type="text" id="username" class="txt" oninput="markDirty()" /><br />
			La tua Meemi Password (verrà salvata criptata): <input type="password" id="password" class="txt" oninput="markDirty(this)" />
			<div class="tips">
				Chreemi necessita della password per accedere alle informazioni del proprio account per motivi di sicurezza.<br />
				La password verrà salvata ed utilizzata in forma criptata. Quindi nessuno potrà conoscerla.
			</div>
		</div>
		<div class="option" id="checkboxes">
			Le notifiche preferite:<br />
			<div class="tips">
				Seleziona le notifiche che vuoi che vengano conteggiate e mostrate sulla barra.<br />
				Potrai comunque vedere tutte le notifiche nel Popup.<br />
			</div>
			<script>
				drawCheckboxes();
			</script>
		</div>
		
		<div class="option">
			Secondi tra ogni controllo: <input type="text" id="delay-time" class="txt" size=5; oninput="markDirty()" /><br />
			<div class="tips">
				Secondi che devono passare tra un controllo e l'altro per verificare la presenza di nuove notifiche.<br />
				Esiste un minimo di 30 secondi, sotto il quale non si può andare, per motivi di efficienza.<br />
			</div>
		</div>
		
		<div class="option">
			Comportamento del Pulsante:<br />
			<div class="tips">
				Comportamento dell'estensione al Click sul pulsante sulla barra. Le opzioni sono auto-esplicative. <br />
			</div>
		<input type="radio" name="button-popup-behaviour" id="button-behaviour-show" value="show" onchange="setPopupBehaviour()" /><label for="button-behaviour-show">Bookmarklet Popup</label><br />
		<input type="radio" name="button-popup-behaviour" id="button-behaviour-hide" value="hide" onchange="setPopupBehaviour()" /><label for="button-behaviour-hide">Go to Meemi Home Page</label><br />
		</div>
		<div class="option">
			Visualizzazione Meme Random:<br />
			<div class="tips">
				Permette o meno la visualizzazione di un Meme casuale, tra gli ultimi 30 movimentati, della propria lista con amici.
			</div>
			<input type="checkbox" name="button-random-meme-behaviour" id="button-random-behaviour" onclick="setRandomMemeBehaviour()" /><label for="button-random-behaviour">Visualizza Random Meme</label><br />
		</div>

		<div class="option">
			<p>Visualizzazione dei memi:<br />
			<div class="tips">
				Dove vuoi che vengano visualizzati i nuovi memi quando si seleziona la notifica.
			</div>
			<input type="radio" name="button-readmeme" id="button-readmeme-meemi" value="meemi" onchange="setMemeReader()"/><label for="button-readmeme-meemi">Web Page</label><br />
			<input type="radio" disabled="disabled" name="button-readmeme" id="button-readmeme-popup" value="popup" onchange="setMemeReader()" /><label for="button-readmeme-popup">Popup</label><br />
			</p>
		</div>
		
		<div ID="footer">
			<button id="save-button" style="font-weight:bold" onclick="save()">Salva</button>
			<button onclick="init()">Cancel</button>
		</div>
		<div id="about-section">
			<span class="section-title">About</span>
			<p>
				Questa estensione è stata creata da <a href="http://meemi.com/Takky">Takky</a> e <a href="http://meemi.com/greenkey">Greenkey</a> per tutti i Meemaniaci!<br />
				Infatti permette di tenere sempre sotto controllo tutte le notifiche di Meemi e magari filtrare quelle che non ci interessano.<br />
				<br />
				Ringraziamo <a href="http://meemi.com/capobecchino">Capobecchino</a>, il <i>sommo</i> creatore di Meemi, per il CSS della Bookmarklet.
			</p>
				<hr />
			<p>
				Stai usando la versione <a id="span_version"><script>$.getJSON('manifest.json',function(data){$('#span_version').html(data.version);});</script></a>
			</p>
		</div>
	</body>
	</html>
